<template>
    <div id="nav">
        <span class="fa fa-list-ul bars" @click="changeMenu"></span>
        <div class="msg-box">
            <slot></slot>
        </div>

    </div>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
        computed: {
            ...mapState([
                "isShowMenu"
            ])
        },
        methods: {
            changeMenu: function () {
                var data = this.isShowMenu?false:true;
                this.$store.commit("setIsShowMenu", data);
            }
        }
    }

</script>

<style scoped>
    #nav {

        height: 0.54rem;
        font-size: 0.2rem;
        background-color: #fff;
        line-height: 0.54rem;
        text-align: left;
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        padding: 0.1rem;
        z-index: 750;
        border-bottom: solid 1px #f1f1f1;
        align-items: center;
    }

    .msg-box {
        width: 60%;
        height: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        
        line-height: 0.54rem;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .bars {
        position: absolute;
          top: 50%;
        transform: translate(0, -50%);
        left: 0.1rem;
    }
</style>